<template>
	<view class="page group-list" style="padding-bottom: 0rpx;">
		<view class="banner-search">
			<!-- 轮播图 -->
			<view class="banner">
				<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
					<swiper class="banner-swipe" :autoplay="true" :interval="3000" :circular="true"
						@change="swiperChange">
						<swiper-item class="banner-swipe-item w100 h100" v-for="(item, index) in banners" :key="index">
							<view class="banner-swipe-img w100 h100 bg-cover"
								:style="{backgroundImage: 'url(' + item.image + ')'}"></view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<!-- 搜索 -->
			<view class="search-box">
				<view class="bar-height" :style="'height:'+ barHeight + 'px'">
					<view class="inner flex-row-center" :style="'height:'+ textHeight + 'px'">
						<uni-icons class="icons fl" type="arrowleft" size="18" color="#ffffff" @click="goNext('/pages/home/index', true)"></uni-icons>
						<view class="flex-column-center">拼团列表</view>
					</view>
				</view>
				<view class="search flex-row-between">
					<!-- <view class="city flex-row-between" @click="goNext('/pages/hotel/city')">
						<text class="font13">武汉</text>
						<view class="iconfont triangle"></view>
					</view> -->
					<input type="text" placeholder="搜索商品名" placeholder-style="color:#666666;"
						:value="initData.param.name" @input="Oninput" />
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach1.png" @tap="Onsearch"></image>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<!--  #ifdef  H5 -->
		<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="300" :initData="initData" @dataRefresh='dataRefresh' v-if="LoadShow">
		<!--  #endif -->
		<!--  #ifdef  MP-WEIXIN -->
		<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="460" :initData="initData" @dataRefresh='dataRefresh' v-if="LoadShow">
		<!--  #endif -->
			<view class="list-box">
				<view class="box-shadow box-goods">
					<block v-for="(item, index) in dataList" :key="index">
						<view class="item flex-row-start flex-start"
							@click="goNext('/pages/group/detail?id=' + item.goods_id)">
							<view class="image bg-cover" :style="{backgroundImage: 'url(' + imgFullUrl+item.logo + ')'}"></view>
							<view class="info">
								<view class="name font15 ellipsis">{{item.name}}</view>
								<view class="group-p1 font12 font-646464">
									单买价￥{{item.price}}&nbsp;&nbsp;&nbsp;已售{{item.sales_actual+item.sales_initial}}
								</view>
								<view class="group-p2 flex-row-start">
									<view class="font12">{{item.spell_number}}人团</view>
									<view class="font12 font-assist">
										<text>￥</text>
										<text class="font14">{{utils.priceStr(item.group_price)[0]}}.</text>
										<text>{{utils.priceStr(item.group_price)[1]}}</text>
									</view>
								</view>
							</view>
							<view class="go">去拼团</view>
						</view>
					</block>
				</view>
			</view>
		</LoadMore>
	</view>
</template>

<script module="utils" lang="wxs" src="../../common/js/utils.wxs"></script>
<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				LoadShow:false,//组件显示
				// 传参数据
				initData: {
					url: '',
					param: {
						name:''
					}
				},
				imgFullUrl: this.$Config.http_static, //图片地址
				barHeight: 0, // 导航栏+状态栏的高度
				textHeight: 0, // 胶囊的高度
				themeColor: '#03004c',
				// 轮播图
				banners: [],
				bannerCurrent: 0,
				dotsStyles: {
					width: 7,
					height: 4,
					bottom: 17,
					backgroundColor: 'rgba(255,255,255,.4)',
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '1px #ffffff solid'
				},
				dataList: [],
			}
		},
		onLoad: function(options) {
			let query = {}
			if (this.$Route.query.scene) {
				query = this.$base.OnWxoptions(this.$Route.query.scene)
			}else{
				query = options
			}
			// 获取banner
			this.OnBanner()
			if(query.id){
				this.initData.url = 'couponGoodsList'
				this.initData.param.coupon_id = query.id
				this.LoadShow = true
			}else{
				this.initData.url = 'getGoodsList'
				this.LoadShow = true
			}
		},
		onShow: function() {
			// 获取导航栏+状态栏的高度
			uni.getSystemInfo({
				success: (e) => {
					this.barHeight = this.customBar
					this.textHeight = this.customBar - this.statusBar
					// #ifdef H5
					this.barHeight = 0
					this.textHeight = 0
					// #endif
				}
			})
		},
		methods: {
			//获取banner
			OnBanner(){
				this.$Http({
					url: 'getBanner',
					data: {},
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item=>{
							item.image = this.imgFullUrl + item.image
						})
						this.banners = res.data
					}
				});
			},
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			// 搜索输入框
			Oninput(e) {
				this.initData.param.name = e.detail.value
			},
			// 点击搜索
			Onsearch() {
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e) {
				this.dataList = e
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({
						url: url
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("../home/goods.less");
	@import url("style.less");
</style>
